<script lang="ts" setup name="HomePageTemplateStyle">
import { ref, onMounted } from "vue";
interface List {
  text: string;
  title: string;
  value: number;
  image: string;
  linkType: number;
  itemList: any[];
}
interface Props {
  datas: {
    text: string;
    list: List[];
  };
}
onMounted(() => {
  // console.log(111, props);
});
const props = defineProps<Props>();
const checkVal = ref(1); // 选中

interface Emits {
  (name: "checkType", value: number): void;
}
const emits = defineEmits<Emits>();
</script>

<template>
  <div class="HomePageTemplateStyle">
    <!-- <div>{{ props.datas }}</div> -->
    <div class="checkType">
      <el-radio-group v-model="checkVal" class="ml-4">
        <el-radio v-for="item in props.datas.list" :key="item.title" :label="item.value">{{ item.title }}</el-radio>
      </el-radio-group>
    </div>

    <div class="content">
      <!-- <img style="width: 300px; height: 200px" :src="props.datas.list[checkVal].image" /> -->
      <img :src="props.datas.list[checkVal - 1].image" />
    </div>

    <el-row justify="center" class="footer">
      <el-button type="primary" @click="emits('checkType', checkVal - 1)">确认</el-button>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.title {
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
.content {
  height: 600px;
  padding: 10px 30px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
